@refer_percent:12.45%;//设计稿1245px
@ref_width:2.89px;
@ref_height:0.342px;
@bg_color: #ffeba5;
@_img:'../img';
.displayFlex(){
    display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box; /* Firefox 17- */
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex; /* Firefox 18+ */
    display: -ms-flexbox; /* IE 10 */
    display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

}
.flex(@n){
	flex: @n;
	-o-flex: @n;
	-ms-flex: @n;
	-moz-flex: @n;
	-webkit-flex: @n;

	-webkit-box-flex: @n;      /* OLD - iOS 6-, Safari 3.1-6 */
	-moz-box-flex: @n;         /* OLD - Firefox 19- */
	-ms-flex: @n;  
	box-flex: @n;  

}
.placeholder(@color,@indent){
	input::-webkit-input-placeholder {
	color: @color !important; 
	text-indent:@indent;
	}
	input:-moz-placeholder {
	color: @color !important; 
	text-indent:@indent;
	}
	input::-moz-placeholder {
	color: @color !important; 
	text-indent:@indent;
	}
	input:-ms-input-placeholder {
	color: @color !important;
	text-indent:@indent;
	}
}
.placeholder(#c8a443 ,0em);


html,body{
	/*height: 100%;*/
	/*overflow: hidden;*/
	font-size: 12px;
}
/*register.html ======*/
body.register{
	/*position: relative;*/
	overflow: hidden;
	background: @bg_color url('@{_img}/bg-reg.png') center bottom no-repeat;
	background-size: 100%;
	color:#c8a443;
}
img{
	display: block;
	width: 100%;
}
.header-whole{
	padding: 32/@ref_width 0 89/@ref_width 0;
}
@media screen and(max-device-height: 481px) {
	.header-whole{
		padding: 32/@ref_width 0 39/@ref_width 0;
	}
}
.logo{
	padding-left: 60/@ref_width;
	width: 60%;
	/*width: 650/@refer_percent;*/
	/*margin: 52/@ref_width 0 89/@ref_width 0;*/
}
.title{
	padding-bottom: 80/@ref_width;
	margin:0 auto;
	width: 277/@refer_percent;
}
@media screen and(max-device-height: 481px) {
	.title{
		padding-bottom: 40/@ref_width;
	}
}
button{border: 1px solid #997300;background-color: #997300;color: #fff;outline: none;}
.wrapper{
	max-width: 450px;
	margin: 0 auto;
	/*overflow: hidden;*/
	background-image: url('@{_img}/bg-reg2.png');
}
.form-box{
	margin: 0 auto;
	/*width: 888/@refer_percent;*/
	width: 76%;

	.text-outer{
		margin-bottom: 60/@ref_width;
		height: 98/@ref_width;	
		.displayFlex();

		.input-text{
			display: block;
			.flex(1);
			height: 98/@ref_width;
			padding-left: 10px;
			font-size: 12px;
			border: 1px solid #997300;
			border-radius: 16/@ref_width;
			background: #fffae4;
			color: #c8a443;
			&.input-rs{
				border-right: none;
				border-radius: 16/@ref_width 0 0 16/@ref_width;
			}
		}
	}
	.btn-text{
		height: 100%;
		width: 200/@ref_width;
		border-radius: 0 16/@ref_width 16/@ref_width 0;
	    font-weight: 700;
	}
	.eyes{
		background-size: 50%;
		background-position: center center;
		background-repeat: no-repeat;
		background-image: url('@{_img}/eyes-cl.png');
		&.open{
			background-image: url('@{_img}/eyes-op.png');
		}
	}	
}
.submit-box{
/*	position: absolute;
	bottom: 100px;
	left: 50%;
	width: 100%;
	height: 183/@ref_width;
	margin-left: -50%;*/
	margin-top: 100/@ref_width;
	text-align: center;
}
@media screen and(max-device-height: 481px) {
	.submit-box{
		margin-top: 60/@ref_width;
	}
}
.back-btn,.regs-btn,.notplay-btn,.notsepa-btn,.sepa-btn{
	display: inline-block;
	width: 557/@refer_percent;
	height: 183/@ref_width;
	background-size: 100%;
	background-position: center center;
	background-repeat: no-repeat;
}
.back-btn{
	background-image: url('@{_img}/btn-back2.png');
}
.regs-btn{
	background-image: url('@{_img}/btn-reg2.png');
	&.no-click{
		background-image: url('@{_img}/btn-reg3.png');
	}
}
.getcode{
	&.no-click{
	    border: 1px solid #898989;
	    color: #D4D4D4;
		background-color: #898989;
	}
}
.footer-whole{
	position: relative;
}
.ship-box{
	position: absolute;
	right: 57/@ref_width;
	bottom: 50/@ref_width;
	width: 725/@ref_width;
	height: 346/@ref_width;
	background: url('@{_img}/ship-3zz.png') center center no-repeat;
	background-size: 100%;
}

/*rank.html====*/
body.rank-list{
	background: @bg_color url('@{_img}/bg-reg2.png') center bottom no-repeat;
	background-size: 100%;
	.header-whole{

		padding-bottom: 60/@ref_width;
	}
	.title{
		padding-bottom: 40/@ref_width;
		margin:0 auto;
		width: 604/@refer_percent;
	}
	ol{
		counter-reset: section; 
	    list-style-type: none;
	    li{
    	  position: relative;
		  margin-bottom: 55/@ref_width;
		  height: 20px;
		  font-size: 60/@ref_width;
		  line-height: 60/@ref_width;
		  text-align: center;
		  span{
		  	display: inline-block;
	  	    margin: 0 22px;
		  }
	      em{
	      	display: inline-block;
		    width: 62px;
		    text-align: right;
	      }
	    }
		li:before{
		  counter-increment: section;   
		  content: counter(section); 
		  display:inline-block;
		  width:85/@ref_width;
		  text-align: center;
		  color: #6d7f3a;
		}
	    li:nth-child(1){
	    	&:before{
				content: '';
				height: 103/@ref_width;
				vertical-align: middle;
				background: url('@{_img}/No1.png');
				background-size: 100%;
	    	}
	    }
	    li:nth-child(2){
	    	&:before{
				content: '';
				height: 103/@ref_width;
				vertical-align: middle;
				background: url('@{_img}/No2.png');
				background-size: 100%;
	    	}
	    }
	    li:nth-child(3){
	    	&:before{
				content: '';
				height: 103/@ref_width;
				vertical-align: middle;
				background: url('@{_img}/No3.png');
				background-size: 100%;
	    	}
	    }
	}
	.list-box{
		margin: 0 auto;
		width: 96%;
	}
	.submit-box{
		margin-top:60/@ref_width;
	}
	.regs-btn{
		background-image: url('@{_img}/btn-gorank.png');
	}
}

/***************************  enter_success.html 闯关成功 ************************************/
body.enter-success{
	/*background: @bg_color url('@{_img}/bg-reg3.png') no-repeat;*/
	background: @bg_color ;
	background-position: center bottom;
	background-size: 100%;
	/*background-attachment: fixed;*/
	.submit-box{
		position: absolute;
		bottom: 300/@ref_width;
		width: 100%;
		margin-top:0;
	}
	.title{
	/*	padding-bottom: 50/@ref_width;
		width: 356/@ref_width;*/
		padding-bottom: 18px;
		width: 95px;
	}
	.header-whole{
		padding: 32/@ref_width 0 39/@ref_width 0;
	}
}
@media screen and(max-device-height: 481px) {
	html,body{
		overflow: auto;
	}
	body.enter-success .submit-box{
		bottom: 180/@ref_width;
	}
}
.despcrition-suc{
	width: 815/@ref_width;
	/*width: 186px;*/
	margin: 0 auto;
}
@media screen and(max-device-height: 481px) {
	body.enter-success .despcrition-suc{
		width: 780/@ref_width;
	}
}
.person{
	position: relative;
	width: 1242/@refer_percent;
	margin: 0 auto;
}
@media screen and(max-device-height: 481px) {
	body.enter-success .title{
		padding-bottom: 30/@ref_width;
		width: 360/@refer_percent;
	}
}
.person-inner{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -150px;
	margin-top: -150px;
	width: 300px;
	height: 300px;
	/*background: rgba(0,0,0,.3);*/
}
.separate-btn,.share-btn{
	position: absolute;
	display: inline-block;
}
.separate-btn{
	top: 70px;
	left: 26px;
	width: 563/1.5/@ref_width;
	height: 528/1.5/@ref_width;
	background:url('@{_img}/separate.png') center center no-repeat;
	background-size: 100%;
	&.cant-separate{
		background:url('@{_img}/no-separate.png') center center no-repeat;
		background-size: 100%;
	}
}
.share-btn{
	top: 100px;
	right: 16px;
	width: 467/1.5/@ref_width;
	height: 485/1.5/@ref_width;
	background:url('@{_img}/share-btn.png') center center no-repeat;
	background-size: 100%;

}
.poup-section{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	height: auto;
	/*padding-top: 200%;*/
	&.hide{
		display: none;
	}
}
.not-reg{
	background: rgba(0,0,0,.6) url('@{_img}/No_reg_bg.png') center center no-repeat;
	background-size: 1016/@refer_percent;
}
.excCode-despcription{
	background: rgba(0,0,0,.6) url('@{_img}/excCode-des.png') center center no-repeat;
	background-size: 1150/@refer_percent;	
}
.share_poup{
	background: rgba(0,0,0,.6) url('@{_img}/share_bg.png') right top no-repeat;
	background-size: 902/@refer_percent;
}
.notplay-btn{	
	background-image: url('@{_img}/btn-notplay.png');

}
.notsepa-btn{
	background-image: url('@{_img}/btn-nspr.png');
}
.sepa-btn{
	background-image: url('@{_img}/btn-spr.png');
}
.check-phone{
	background: rgba(0,0,0,.6) url('@{_img}/check_ph_bg.png') right center no-repeat;
	background-size: 1174/@refer_percent;
	.form-box{
		position: absolute;
		top: 50%;
		left: 50%;
		width: 660/@ref_width;
		margin-left: -330/@ref_width;
		.text-outer{
			.input-text{
				color: #5d7a1d;
				background: #e9ffb8;
				border: 1px solid #092b00;
				.placeholder(#fff ,0em);
			}
		} 
		.btn-text{
			padding-left: 4px;
			border-radius: 0;
		}
	}
}